<template>
  <header>
    <div class="header-top min-width">
      <div class="container fn-clear">
        <strong class="fn-left">
          咨询热线：400-000-0000
          <span class="s-time">服务时间：9:00 - 18:00</span>
        </strong>
        <ul class="header_contact">
          <li class="c_1">
            <a class="ico_head_weixin" id="wx"></a>
          </li>
          <li class="c_2">
            <a href="#" target="_blank" title="官方QQ" alt="官方QQ">
              <b class="ico_head_QQ"></b>
            </a>
          </li>
          <li class="c_4">
            <a href="#" target="_blank" title="新浪微博" alt="新浪微博">
              <b class="ico_head_sina"></b>
            </a>
          </li>
        </ul>

        <!-- 用户未登录 -->
        <ul v-if="!userInfo" class="fn-right header-top-ul">
          <!-- <li><a href="" :class="'c-orange'">测试</a></li> -->
          <li>
            <NuxtLink to="/" :class="{ 'c-orange': $route.fullPath === '/' }"
              >返回首页</NuxtLink
            >
          </li>
          <li>
            <div class="">
              <NuxtLink
                to="/register"
                :class="{ 'c-orange': $route.fullPath === '/register' }"
              >
                免费注册
              </NuxtLink>
            </div>
          </li>
          <li>
            <div class="">
              <NuxtLink
                to="/login"
                :class="{ 'c-orange': $route.fullPath === '/login' }"
              >
                登录
              </NuxtLink>
            </div>
          </li>
        </ul>

        <!-- 用户已登录 -->
        <ul v-if="userInfo" class="fn-right header-top-ul">
          <li><NuxtLink to="/" class="app">返回首页</NuxtLink></li>
          <li>
            <div class="">
              <NuxtLink to="/user" class="user" title="我的账户">
                <img
                  :src="userInfo.headImg"
                  style="width: 30px;height:30px;margin-top: 5px;"
                />
                <i>{{ userInfo.nickName }}</i>
              </NuxtLink>
            </div>
          </li>
          <li>
            <div class="">
              <a
                href="javascript:void(0)"
                class="js-login"
                @click="logout()"
                title="退出"
              >
                退出
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="header min-width">
      <div class="container">
        <div class="fn-left logo">
          <NuxtLink to="/">
            <img src="~/assets/images/logo.png" title="" />
          </NuxtLink>
        </div>
        <ul class="top-nav fn-clear">
          <li :class="{ on: $route.fullPath === '/' }">
            <NuxtLink to="/">首页</NuxtLink>
          </li>
          <li :class="{ on: $route.fullPath === '/list' }">
            <NuxtLink to="/lend"> 我要投资 </NuxtLink>
          </li>
          <li :class="{ on: $route.fullPath === '/help' }">
            <NuxtLink to="/help">安全保障</NuxtLink>
          </li>
          <li :class="{ on: $route.fullPath === '/about' }">
            <NuxtLink to="/about">关于我们</NuxtLink>
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>
<script>
import "~/assets/font/iconfont.css";
import cookie from "js-cookie";

export default {
  data() {
    return {
      userInfo: null,
    };
  },
  //nuxt项目中 如果使用了浏览器的内置对象、Api 不能在created中执行，只能在mounted中编写
  mounted() {
    // nuxt支持服务端渲染，以后vue的created生命周期函数会在前端服务器中执行
    // localStorage和cookie是浏览器的对象，在服务端不存在  不能获取浏览器中的数据
    this.showInfo();
  },

  methods: {
    //显示用户信息
    showInfo() {
      //判断 如果地址栏中有token参数 获取缓存到localStorage中
      // console.log(this.$route.query.token);
      if (this.$route.query.token) {
        localStorage.setItem("srb-token", this.$route.query.token);
        //删除浏览器地址栏中使用完的token
        window.location = "/";
      }
      //获取localStorage中的userInfo缓存，如果存在直接回显
      let srbUserStr = localStorage.getItem("srb-user");
      if (srbUserStr) {
        // 将json字符串转为json对象
        this.userInfo = JSON.parse(srbUserStr);
        return;
      }
      //获取localStorage中的token
      let srbToken = localStorage.getItem("srb-token");
      if (!srbToken) {
        return;
      }
      //当srb-token存在时才能发起请求查询
      //根据token获取用户的信息展示
      this.$axios({
        url: "/api/core/userInfo/auth/userDetail",
        method: "GET",
        // axios的配置中 传递参数时，无论data、params、headers 都需要传json对象
        headers: { token: localStorage.getItem("srb-token") },
      }).then((r) => {
        console.log(r.data.data.item);
        //回显用户数据
        this.userInfo = r.data.data.item;
        //将用户信息缓存到浏览器的localStorage中:对象必须转为字符串存储
        localStorage.setItem("srb-user", JSON.stringify(this.userInfo));
      });
    },

    //退出
    logout() {
      //弹出退出确认框
      //注销目的是为了删除登录缓存(前端后端缓存)
      localStorage.removeItem("srb-token");
      localStorage.removeItem("srb-user");
      //跳到首页
      window.location = "/";
    },
  },
};
</script>
